<template>
  <div class="spring-detail">
    <el-card shadow="always">
      <div slot="header">
        <span><strong>Spring监控详情</strong></span>
      </div>
      <el-descriptions :labelStyle="{width:'20%'}" :contentStyle="{width: '30%'}" :column="2" border>
        <el-descriptions-item v-for="(value,key,index) in data" :key="index">
          <template slot="label">
            <div class="spring-detail-key"
                 :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
              {{ langData(String(key)) }}
            </div>
          </template>
          <div class="spring-detail-value"> {{ value }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {springDetail} from "@/api/druidMonitor";
import lang from "@/utils/datasourceLanguage";

@Component({name: 'SpringDetail'})
export default class SpringDetail extends Vue {
  // 表格数据
  private data: any = {};

  getData() {
    let params = {
      className: this.$route.query.className || '',
      methodName: this.$route.query.methodName || ''
    };
    springDetail(params).then((response: any) => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  langData(key: string) {
    return lang[key] ? lang[key][1] : key;
  }

  mounted() {
    this.getData();
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/index.scss';

.spring-detail {
  @include wh();

  ::v-deep .el-descriptions__table {
    table-layout: fixed;
  }

  &-key, &-value {
    overflow: hidden; //超出宽度部分隐藏
    text-overflow: ellipsis; //超出部分显示省略号
  }

  &-key {
    cursor: pointer;
  }
}
</style>
